<template>
  <edit-exam :data="editData" @editFinish="fetchExamList" />
  <a-page-header title="考试安排管理" sub-title="管理考试场次" />
  <a-space>
    <a-button type="primary" @click="editExam(-1)">添加考试</a-button>
    <a-button type="primary" @click="goFirstPage">返回第一页</a-button>
  </a-space>
  <br /><br />
  <a-table
    :dataSource="examList"
    :columns="columns"
    rowKey="id"
    :pagination="pagination"
    :loading="loading"
    @change="handleTableChange"
  >
    <template #duration="{ record }">
      <a-tag color="green">{{ record.duration }}秒</a-tag>
    </template>
    <template #action="{ record }">
      <a @click="editExam(record.id)">编辑</a>
      <a-divider type="vertical" />
      <a @click="showLoginPage(record.id)">打开考试登录页</a>
      <a-divider type="vertical" />
      <a @click="showExamPage(record.id)">进入监考页面</a>
      <a-divider type="vertical" />
      <a-dropdown>
        <a class="ant-dropdown-link" @click.prevent>
          更多操作
          <down-outlined />
        </a>
        <template #overlay>
          <a-menu>
            <a-menu-item @click="handleDeleteExam(record.id)"> 删除 </a-menu-item>
            <a-menu-item @click="handleEndExam(record.id)"> 结束考试 </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </template>
  </a-table>
</template>

<script>
import { defineComponent, createVNode, onMounted, reactive, ref } from "vue";
import { DownOutlined, ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { deleteExam, endExam, getAllExam } from "../../utils/api";
import EditExam from "../../components/admin/EditExam.vue";
import { message, Modal } from "ant-design-vue";

export default defineComponent({
  setup() {
    const columns = [
      {
        title: "ID",
        dataIndex: "id",
      },
      {
        title: "试卷ID",
        dataIndex: "paper_id",
      },
      {
        title: "试卷名称",
        dataIndex: "name",
      },
      {
        title: "开始时间",
        dataIndex: "start_time",
      },
      {
        title: "考试时长",
        slots: { customRender: "duration" },
      },
      {
        title: "操作",
        slots: { customRender: "action" },
      },
    ];
    const examList = ref([]);
    const loading = ref(false);
    const editData = reactive({
      visible: false,
      examId: 0,
    });

    const handleDeleteExam = (id) => {
      Modal.confirm({
        title: "提示",
        icon: createVNode(ExclamationCircleOutlined),
        content: createVNode("div", {}, [
          createVNode("p", {}, "删除考试安排将导致相关内容全部被删除"),
          createVNode("p", {}, `将删除ID为${id}的考试,请确认`),
        ]),
        onOk() {
          deleteExam(id).then((res) => {
            message.success(res.data.message);
            fetchExamList();
          });
        },
      });
    };
    const handleEndExam = (id) => {
      Modal.confirm({
        title: "提示",
        icon: createVNode(ExclamationCircleOutlined),
        content: createVNode("div", {}, [
          createVNode("p", {}, "此操作将会将考试开始时间修改为2099年"),
          createVNode("p", {}, `之后考生将无法开始考试,现在正在考试的考生可继续考试`),
        ]),
        onOk() {
          endExam(id).then((res) => {
            message.success(res.data.message);
            fetchExamList();
          });
        },
      });
    };
    const showLoginPage = (id) => {
      window.open(`/#/exam/${id}/login`);
    };
    const showExamPage = (id) => {
      window.open("/#/admin/examStatus/" + id);
    };

    const pagination = reactive({
      showTotal: (total) => `共有 ${total} 条数据`,
      total: 0,
      current: 1,
      pageSize: 0,
    });

    const editExam = (id) => {
      editData.examId = id;
      editData.visible = true;
    };
    const fetchExamList = async () => {
      loading.value = true;
      let result = await getAllExam(pagination.current);
      pagination.total = result.data.data.total;
      pagination.pageSize = result.data.data.size;
      examList.value = result.data.data.records;
      loading.value = false;
    };
    const goFirstPage = () => {
      pagination.current = 1;
      fetchExamList();
    };
    const handleTableChange = (pag) => {
      pagination.current = pag.current;
      fetchExamList();
    };

    onMounted(() => {
      fetchExamList();
    });

    return {
      editData,
      pagination,
      loading,
      columns,
      examList,
      handleTableChange,
      editExam,
      fetchExamList,
      showLoginPage,
      showExamPage,
      handleDeleteExam,
      handleEndExam,
      goFirstPage,
    };
  },
  components: {
    DownOutlined,
    EditExam,
  },
});
</script>
